<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="./css/bootstrapValidator.css"> -->
  <script src="./js/jquery-1.10.2.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/bootstrapValidator.min.js"></script>
  <script src="./js/plug-in.min.js"></script>
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">
</head>

<body>
  <!-- 登陆页面头部 -->
  <div class="login-header">
    <div class="login-container">
      <div class="login-logo">
        <img src="images/LOGO.png">
      </div>
    </div>
  </div>
  <!-- 登陆页面 -->
  <div class="login-center">
    <div class="login-container">
      <div class="center-bg">
        <div class="login-center-r">
          <form id="login" method="post">
            <h2>登陆</h2>
            <p>欢迎登录XX商城，立刻开始您的购物之旅</p>
            <div class="form-group">
              <label>用户名</label>
              <input type="text" class="form-control" name="username" autocomplete="off" placeholder="请输入用户名" />
            </div>
            <div class="form-group">
              <label>密码</label>
              <input type="password" class="form-control" name="password" placeholder="请输入密码" />
            </div>
            <a href="#">忘记密码？</a>
            <button type="submit" onclick="check(this.form);return false;">登录</button>
            <p>没有账号？
              <a href="#">立即注册</a>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- 登陆页面尾部 -->
  <div class="login-footers">
    <p>&copy;&nbsp;&nbsp;&nbsp;2018 WWW.SHOPPING.COM</p>
  </div>
</body>
<script>
 
  $('#login').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        message: '用户名不能为空',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          }
        }
      }
    }

  });

  function check(form) {
    if( form.username.value == ""){
      form.username.focus();
      return false;
    }
    if(form.password.value == ""){
      form.password.focus();
      return false;
    }
    $.ajax({
        type: "post",
        url: "data/data.php",
        data: {
          "username":form.username.value,
          "password": form.password.value
        },
        dataType: "json",
        success: function (data) {
          if(data.code == 0){
              $.Pop(data.message, {
                Title: "提示", //标题
                Close: true, //是否显示关闭按钮 true(开)/false(关)
                Animation: "layerFadeIn", // 默认动画
                BoxBg: true, // 是否显示遮罩背景层 true(开)/false(关)
                BoxDrag: false, // 是否可以移动弹出层 true(开)/false(关)
                BoxBgopacity: 0.6, // 遮罩层的透明度 0-1 0完全透明1完全黑暗
                ZIndex: 99999, // 弹出层的cssz-index属性
                Class: false, // 是否叠加css样式
                Btn: {} // 按钮
              })
          }else{
            // 跳页面
          }
        },
        error:function(){

        }
    })
  }
</script>

</html>